<template>
  <div class="productSelect">
    <div class="select acea-row row-center-wrapper" @click="openModal" :style="'width:'+size+'px;height:'+size+'px;'">
      <img :src="product_pic" v-if="product_pic != ''" alt="">
      <a-icon type="plus" v-else style="font-size:18px" />
      <a-icon type="close-circle" theme="filled" v-if="product_pic != ''" class="clear" @click.stop="clear" />
    </div>
    <a-modal :footer="null" title="商品选择器" v-model="show" :width="1000" @cancel="show = false">
      <div class="search">
        <a-form-model layout="inline" :model="seachForm" >
          <a-form-model-item label="商品分类" prop="class">
            <a-tree-select
              v-model="seachForm.class_id"
              style="width:175px;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="classData"
              :replaceFields="{key:'id',value:'id'}"
              allow-clear
              placeholder="选择栏目"
            >
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item label="商品搜索：" prop="title">
            <a-input placeholder="输入商品名称" v-model="seachForm.title" style="width:175px;" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="seachSubmit">
              搜索
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="table">
        <a-table :columns="columns" :row-selection="rowSelection" :pagination="false" :loading="loading" rowKey="id" :data-source="list" >
          <div slot="pic" slot-scope="record"><img class="pic" :src="record.pic" alt=""></div>
          <div slot="title" slot-scope="record" class="line2" :title="record.title">{{record.title}}</div>
        </a-table>
        <div class="acea-row row-right" style="margin-top:20px">
          <a-pagination show-quick-jumper :defaultPageSize="limit" v-model="page" :total="count" @change="getData" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import request from 'api/request'

const columns = [
  { title: '商品ID', dataIndex: 'id',width:100, key: 'id' },
  { title: '商品图', key: 'pic',width:100,scopedSlots: { customRender: 'pic' }},
  { title: '商品名称', key: 'title',width:500,scopedSlots: { customRender: 'title' }},
]

export default {
  props:{
    value:{
      type:[String,Number],
      default:""
    },
    size:{
      type:[String,Number],
      default:58
    }
  },
  data() {
    return {
      show:false,
      seachForm:{
        class_id:null,
        title:''
      },
      page:1,
      limit:10,
      count:0,
      product_id:"",
      product_pic:"",
      list:[],
      columns,
      loading:false,
      classData:[],
      once:true
    }
  },
  created() {
    this.getClass()
    this.getData()
  },
  methods: {
    openModal(){
      this.show = true
    },
    getData(){
      this.loading = true
      let data = {
        type:1,
        page:this.page,
        limit:this.limit
      }
      request.get("/product/list",data).then(e=>{
        if(e.status == 200){
          this.list = e.data.data
          this.count = e.data.count
          this.checkValue(this.value)
        }
        this.loading = false
      })
    },
    getClass(){
      request.get("/product/getClass").then(e=>{
        if(e.status == 200){
          let arr = []
          for(let i of e.data){
            if(i.pid == 0){
              i.children = e.data.filter(s=>s.pid == i.id)
              arr.push(i)
            }
          }
          this.classData = arr
        }
      })
    },
    seachSubmit(){ // 搜索submit
      let seachForm = this.seachForm
      seachForm.type = 1
      this.loading = true
      request.get("/product/list",seachForm).then(e=>{
        if(e.status == 200){
          this.list = e.data
        }
        this.loading = false
      })
    },
    checkValue(val){
      if(val != ""&&this.once){
        let f = this.list.find(e=>e.id == val)
        this.product_pic = f.pic
        this.product_id = val
        this.once = false
      }
    },
    outPut(){
      this.$emit("confirm",this.product_id,this.product_pic)
    },
    clear(){
      this.product_pic = ""
      this.product_id = ""
      this.outPut()
    }
  },
  computed:{
    rowSelection(){
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          let id = selectedRowKeys[0]
          let f = this.list.find(e=>e.id == id)
          this.product_id = id
          this.product_pic = f.pic
          this.show = false
          this.outPut()
        },
        columnWidth:'100px',
        columnTitle:'选择商品',
        selectedRowKeys:[this.product_id],
        type:"radio",
      };
    }
  }
}
</script>

<style scoped>
  .productSelect .select{
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    position: relative;
  }
  .productSelect .select .clear{
    color: #f5222d;
    font-size: 14px;
    position: absolute;
    top: -7px;
    right: -7px;
  }
  .table{
  }
  .pic{
    display: block;
    width: 36px;
    height: 36px;
  }
  .line2{
    width: 500px;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;
  }
</style>